<template>
	<view class="container" :style="{backgroundImage:showPageBg?`url(${sheep.$config.staticUrl}/static/bg/${pageBgName}.png)`:''}" >
		<z-navbar v-if="showNav" :placeholder="placeholder" :titleColor="titleColor" :autoBack="autoBack" :bgColor="navBgColor?navBgColor:navBg" :title="title" :leftIconSize="leftIconSize">
			<template v-slot:left>
				<slot v-if="$slots.left" name="left"></slot>
				<block v-else>
					<z-icon v-if="pageStack > 1" :builtIn="leftIconIn" :name="leftIcon" :color="leftIconColor" :size="leftIconSize"></z-icon>
					<z-icon @tap.stop="goHome" v-else builtIn name="home" :size="leftIconSize" :color="leftIconColor"></z-icon>
				</block>
			</template>
			<template v-slot:right>
				<slot v-if="$slots.right" name="right"></slot>
			</template>
		</z-navbar>
		<view v-if="loading" style="height: 60vh;position: fixed;top: 20vh;">
			<uv-loading-page bgColor="transparent" :loading="loading" :loading-text="$t('加载中...')" font-size="24rpx" :color="sheep.$store('app').scss.main" :loadingColor="sheep.$store('app').scss.main"></uv-loading-page>
		</view>
		<view v-if="!loading">
			<NoLoginPage v-if="showNoLoginPage && !sheep.$store('user').isLogin" :label="noLoginLabel" />
			<slot v-else></slot>
			<view v-if="safeBottom" class="safe-bottom"></view>
			<uv-gap height="50"></uv-gap>
		</view>
		<!-- <z-auth-modal /> -->
		<authModal />
		<readAgreement />
	</view>
	
</template>

<script setup>
	import sheep from "@/sheep"
	import readAgreement from "./readAgreement"
	import authModal from "./authModal"
	import NoLoginPage from "./NoLoginPage"
	const props = defineProps({
		title:{
			type:String,
			default:''
		},
		showPageBg:{
			type:Boolean,
			default:true
		},
		autoBack:{
			type:Boolean,
			default:true
		},	
		pageBgName:{
			type:String,
			default:'page-bg'
		},
		leftIconIn:{
			type:Boolean,
			default:true
		},
		showNav:{
			type:Boolean,
			default:true
		},
		placeholder:{
			type:Boolean,
			default:true
		},
		showNavLogo:{
			type:Boolean,
			default:false
		},
		loading:{
			type:Boolean,
			default:false
		},
		leftIconSize:{
			type:[String,Number],
			default:24
		},
		// 左边的图标
		leftIcon: {
			type: String,
			default: 'arrow-left'
		},
		safeBottom:{
			type:Boolean,
			default:true
		},
		logo:{
			type:String,
			default:''
		},
		navBgColor:{
			type:String,
			default:'#fff'
		},
		titleColor:{
			type:String,
			default:'#222'
		},
		leftIconColor:{
			type:String,
			default:'#222'
		},
		defaultNavBg:{
			type:String,
			default:'180, 220, 253'
		},
		showNoLoginPage:{
			type:Boolean,
			default:false
		},
		noLoginLabel:{
			type:String,
			default:'登录后可查看更多内容'
		}
	})
	const state = reactive({
		opacity:0,
		showMyInfoPopup:false
	})
	watch(() => props.gzgzhModal,newValue => {
		if(!sheep.$store('user').isLogin) return gzgzhModal(false)
		if(!sheep.$store('user').userInfo.id) return gzgzhModal(false)
		gzgzhModal(newValue)
	})
	const navBg = computed(() => {
		return `rgba(${props.defaultNavBg},${state.opacity})`
	})
	const pageStack = computed(() => {
		let pages = getCurrentPages();
		return pages.length
	})
	function goHome(){
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
	onPageScroll((e) => {
	  state.opacity = e.scrollTop >= 200 ? 1:e.scrollTop / 200
	});
</script>

<style lang="scss" scoped>
	.container {
		height: calc(100% - 120rpx);
		background-size: 100% auto;
		background-repeat: no-repeat;
		.navBg {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			transition: all 0.3s;
		}
	}
</style>